
<template>
  <div class="serach-result">
    <!-- 导航栏 -->
    <van-nav-bar :title="`${this.$route.query.q}的搜索结果`"
                 left-arrow
                 fixed
                 @click-left="$router.back()" />
    <!-- 文章列表 -->
    <div class="list-content">
      <van-list class="article-list"
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad">
        <van-cell v-for="item in list"
                  :key="item.art_id.toString()"
                  :title="item.title"
                  @click="toDetail(item.art_id.toString())" />
      </van-list>
    </div>
  </div>
</template>

<script>
import { getSearch } from '@/api/search'
export default {
  name: 'SearchResult',
  data () {
    return {
      list: [], // 搜索结果数据 存储接口返回的数据，及下拉刷新后新旧数据
      loading: false,
      finished: false,
      keyword: '', // 当前搜索关键词
      page: 1
    }
  },
  methods: {
    onLoad () {
      getSearch(this.$route.query.q, this.page).then(res => {
        // 1. 如果下拉后的结果为空时，提示没有更多了
        const arr = res.data.data.results
        if (arr.length === 0) {
          this.finished = true
        }
        // 2.新数据需要添加到老数据的后面
        this.list = [...this.list, ...arr]
        this.page++
        // 3.手动关闭默认的上拉加载行为
        this.loading = false
      })
    },
    // 跳转文章详情页
    // eslint-disable-next-line camelcase
    toDetail (art_id) {
      this.$router.push({
        path: '/detail',
        query: {
          artID: art_id
        }
      })
    }

  }
}
</script>

<style lang="less" scoped>
.serach-result {
  height: 100%;
  overflow: auto;
  .article-list {
    margin-top: 4px;
  }
  // 这里有一个巨坑,一定要在布局上满足vant对于是否加载满一屏的要求
  // 否则会一直请求直到没有数据
  .list-content {
    position: fixed;
    top: 44px;
    bottom: 0;
    width: 100%;
    // 必须要加,否则无法滑动
    overflow-y: auto;
  }
}
</style>
